<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_344730_xamx7s3j4l0x80k9.css" />
		<style type="text/css">
			body {
				background: url(../img/img.png) no-repeat;
				background-size: cover;
			}
			
			h2 {
				width: 100%;
				line-height: 2.5rem;
				height: 2.5rem;
				text-align: center;
			}
			
			h3 {
				text-align: center;
				font-size: 0.34rem;
				font-weight: 500;
			}
			
			.warp {
				width: 100%;
				height: 2.4rem;
				margin-top: 20%;
				font-size: 0.24rem;
			}
			
			.login_psd {
				width: 100%;
				height: 0.8rem;
				line-height: 0.8rem;
				box-sizing: border-box;
				border-bottom: 0.01rem solid #f6f6f6;
			}
			
			.login_psd span {
				margin-left: 5%;
				width: 20%;
				display: inline-block;
			}
			
			input {
				width: 40%;
				border: 0;
				font-size: 0.24rem;
			}
			
			.btn {
				font-size: 0.24rem;
				border: 0;
				background: #fff;
			}
			
			.icon-yuanquanxuanzhong {
				color: #fe8a76;
			}
			
			.login_btn {
				.wh(90%, 0.7rem);
				background: #FE8A76;
				text-align: center;
				line-height: 0.7rem;
				border-radius: 0.1rem;
				margin: 0.48rem 5%;
				font-size: 0.24rem;
				color: #fff;
				margin-top: 10%;
			}
			
			.addressdialog {
				position: fixed;
				padding: 0.05rem 0.25rem;
				background: rgba(0, 0, 0, 0.9);
				top: 70%;
				left: 50%;
				color: #fff;
				z-index: 100;
				border-radius: 0.1rem;
				display: none;
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
			}
			
			.descript {
				width: 90%;
				height: 0.4rem;
				margin-top: 15%;
				line-height: 0.4rem;
				font-size: 0.2rem;
				color: #FE8A76;
				text-align: center;
			}
			
			.descript p {
				margin-left: 10%;
			}
		</style>

	</head>

	<body>
		<h2></h2>
		<h3><span></span>社区报名表</h3>
		<div class="warp">
			<div class="login_psd">
				<span>用户名</span>
				<input type="text" placeholder="请输入您的用户名" value="" class="nickname" />
			</div>
			<div class="login_psd">
				<span>手机号</span>
				<input type="number" placeholder="请填写真实手机号" value="" class="userphone" />
			</div>
			<div class="login_psd">
				<span>验证码</span>
				<input type="tel" placeholder="" class="yanzheng" />
				<button class="btn">获取验证码</button>
			</div>
			<div class="login_psd">
				<span>置业意向</span>
				<i class="iconfont icon-yuanquanxuanzhong" data-info="1"><span style="font-size: 0.28rem;color: #666;" class="true">是</span></i>
				<i class="iconfont icon-weixuanzhongyuanquan" data-info="2"><span style="font-size: 0.28rem;color: #666;" class="false">否</span></i>
			</div>
		</div>
		<div class="descript">
			<p>*若不是天乐会员，报名成功后就成为天乐会员啦！</p>
			<p>默认密码123456</p>
		</div>
		<div class="login_btn">
			提交
		</div>
		<span class="addressdialog"></span>
	</body>
	<script src="../js/zujian/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var addurl = window.location.href
		var id = addurl.split("?")[1].split("=")[1]
		$.ajax({
			type: "post",
			url: "http://demo.tl178.cn/Apply/community_name",
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				community_Id: id
			},
			success: function(data) {
				var data = JSON.parse(data)
				console.log(data)

				if(data["status"] == 0) {
					//					$(".addressdialog").show();
					//					$(".addressdialog").html(data["message"]);
					//					$(".addressdialog").fadeOut(1200);
					alert(data["message"])
				}
				$("h2").html(data["list"]["road"])
				$("h3 span").html(data["list"]["name"])
			}
		})
		$(".login_psd .iconfont").click(function() {
			if($(this).attr("class") == "iconfont icon-weixuanzhongyuanquan") {
				$(this).removeClass("icon-weixuanzhongyuanquan").addClass("icon-yuanquanxuanzhong")
				$(this).siblings().removeClass("icon-yuanquanxuanzhong").addClass("icon-weixuanzhongyuanquan")
				$(this).parent().find("span").removeClass("icon-weixuanzhongyuanquan")
			}
		})
		$(".userphone").blur(function() {
			$.ajax({
				type: "post",
				url: "http://demo.tl178.cn/Apply/verify",
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: {
					mobile: $(".userphone").val()
				},
				success: function(data) {
					var data = JSON.parse(data)
					console.log(data)
					if(data["status"] == 0) {
						$(".addressdialog").show();
						$(".addressdialog").html(data["message"]);
						$(".addressdialog").fadeOut(1200);
					} else {
						$(".btn").click(function() { //获取验证码
							if(!$(".userphone").val()) {
								$(".addressdialog").show();
								$(".addressdialog").html("手机号不能为空");
								$(".addressdialog").fadeOut(1200);
							} else {
								var reg = new RegExp(/^1[34578]\d{9}$/);
								if(!reg.test($(".userphone").val()) || $(".userphone").val().length != 11) {
									$(".addressdialog").show();
									$(".addressdialog").html("请输入正确的手机号");
									$(".addressdialog").fadeOut(1200);
								} else {
									$.ajax({
										type: "post",
										url: "http://demo.tl178.cn/Login/send",
										headers: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										data: {
											mobile: $(".userphone").val(),
											type: 5
										},
										success: function(data) {
											$(".addressdialog").show();
											$(".addressdialog").html("验证码发送成功");
											$(".addressdialog").fadeOut(1200);
											var wait = 60;
											$(".btn").attr("disabled", true);
											$(".btn").css({
												"color": "#B3B3B3"
											})
											var timer = setInterval(function() {
												$(".btn").html("重新发送" + "(" + wait + ")")
												wait--
												if(wait < 0) {
													$(".btn").html("获取验证码")
													$(".btn").attr("disabled", false);
													$(".btn").css({
														"color": "#000"
													})
													clearInterval(timer)
												}
											}, 1000)
										}
									});
								}
							}
						})
					}
				}
			})
		});

		$(".login_btn").click(function() {
			if($(".true").parent().attr("class") == "iconfont icon-yuanquanxuanzhong") {
				var type = 1
			}
			if($(".false").parent().attr("class") == "iconfont icon-yuanquanxuanzhong") {
				var type = 2
			}
			console.log(type)
			if(!$(".nickname").val()) {
				$(".addressdialog").show();
				$(".addressdialog").html("用户名不能为空");
				$(".addressdialog").fadeOut(1200);
			} else {
				if(!$(".userphone").val() || !$(".yanzheng").val()) {
					$(".addressdialog").show();
					$(".addressdialog").html("手机号或验证码不能为空");
					$(".addressdialog").fadeOut(1200);
				} else {
					$.ajax({
						type: "post",
						url: "http://demo.tl178.cn/Apply/community",
						async: true,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						data: {
							username: $(".nickname").val(),
							tel: $(".userphone").val(),
							code: $(".yanzheng").val(),
							type: type,
							community_Id: id
						},
						success: function(data) {
							console.log(data)
							var result = JSON.parse(data)
							if(result["status"] == 1) {
								var id = result["id"]
								$(".addressdialog").show();
								$(".addressdialog").html(result["message"]);
								$(".addressdialog").fadeOut(1200);
								setTimeout(function() {
									window.location.href = "http://app.tl178.cn/#/routeInfo/" + id + "?=" + result["user_Id"]
								}, 1000)
							} else {
								$(".addressdialog").show();
								$(".addressdialog").html(result["message"]);
								$(".addressdialog").fadeOut(1200);
							}
						}
					});
				}
			}
		})
	</script>

</html>